<template>
  <div class="pad-out-box">
    <el-form label-width="150px" size="small" :model="searchParams" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="合同名称">
            <el-input placeholder="请输入" v-model="searchParams.contractName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同类型">
            <el-select v-model="searchParams.contractType" clearable>
              <el-option v-for="item in contractTypeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="合同状态">
            <el-select v-model="searchParams.contractStatus" clearable>
              <el-option v-for="item in statusList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="对方名称">
            <el-input placeholder="请输入" v-model="searchParams.partnerName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同开始时间">
            <el-date-picker v-model="searchParams.contractBeginDate" type="date" value-format="timestamp" :picker-options="pickerOptionsStart" clearable placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同结束时间">
            <el-date-picker v-model="searchParams.contractEndDate" type="date" value-format="timestamp" :picker-options="pickerOptions" clearable placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-button type="primary" size="mini" class="f-right" @click="getTableData('')">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="padding-left-right-10">
      <el-table :border="true" :data="tableData">
        <el-table-column align="center" label="项目名称" prop="projectName" />
        <el-table-column align="center" label="合同名称" prop="contractName" />
        <el-table-column align="center" label="合同类型" prop="status">
          <template slot-scope="scope">
            <span>{{ getContractName(scope.row.contractType) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同开始时间" prop="remark">
          <template slot-scope="scope">
            <span>{{ scope.row.contractBeginDate | formatDateTime('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同结束时间" prop="remark">
          <template slot-scope="scope">
            <span>{{ scope.row.contractEndDate | formatDateTime('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同状态" prop="contractStatus">
          <template slot-scope="scope">
            <span>{{ getStatusName(scope.row.contractStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" prop="remark">
          <template slot-scope="scope">
            <el-button type="text" @click="goPage(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination @change="pageChange" :total="total" />
    </div>

    <el-dialog title="起草" :visible.sync="statusDialog" width="60%" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="bg-contract" :class="statusCurrentKey == item.dictKey ? 'activity-chose' : ''" v-for="(item, index) in contractTypeList" :key="index" @click="statusCurrentKey = item.dictKey">{{ item.dictValue }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="statusDialog = false">取消</el-button>
        <el-button size="small" type="primary" @click="confirmDialog(contractObj)">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { apiContrantList } from '../../../api/contract';
import commonMixin from '../../../mixin';

export default {
  mixins: [commonMixin],

  data() {
    return {
      statusDialog: false,
      statusCurrentKey: '',
      contractObj: {
        contractStatus: 0,
        primaryKey: '',
      },
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
    };
  },

  mounted() {
    this.getOptionList();
    console.log(Boolean(null));
    console.log(null == null);
    console.log('null' == null);
    this.getTableData();
  },

  methods: {
    //数据源
    async getTableData(type) {
      let param = {
        pageSize: this.pageSize,
        currentPage: type ? this.currentPage : 1,
        status: 1,
        ifContractManage: true,
        contractStatus: 0,
      };
      for (let i in this.searchParams) {
        param[i] = this.searchParams[i] === '' ? null : this.searchParams[i];
      }
      let res = await apiContrantList(param);
      this.tableData = res.rows || [];
      this.total = res.total || 0;
    },
    draftFn() {
      this.statusDialog = true;
      this.statusCurrentKey = '';
    },
    
    confirmDialog(obj) {
      if (!this.statusCurrentKey) {
        this.$message.warning('请选择合同类型');
        return;
      }
      this.statusDialog = false;
      obj.contractType = this.statusCurrentKey;
      this.goPage(obj, 'draft');
    },

    //分页
    pageChange(e) {
      this.currentPage = e.currentPage;
      this.pageSize = e.pageSize;
      this.getTableData('more');
    },
  },
};
</script>
<style scoped type="scss">
::v-deep .el-dialog__body {
  overflow: hidden;
}
.bg-contract {
  width: fit-content;
  padding: 10px 15px;
  border: 1px solid #f1f1f1;
  text-align: center;
  margin: 0 10px 15px 10px;
  float: left;
  cursor: pointer;
}
.activity-chose {
  color: #fff;
  background: #409eff;
  border: 1px solid #409eff;
}
</style>
